// 把参数发到一个对象里面 方便复用
const query = {
    pagenum: 1,     //	是	int	页码值
    pagesize: 2,    //	是	int	每页显示多少条数据
    cate_id: '',    //  否	string	文章分类的 Id
    state: '',      //   否	string	文章的状态，可选值有：已发布、草稿
}

async function render() {
    const { data } = await axios.get('/my/article/list', {
        params: query
    })

    // console.log(data);
    $('#list').html(data.data.map(({ Id, title, state, pub_date, cate_name }) => `<tr>
        <td>${title}</td>
        <td>${cate_name}</td>
        <td>${pub_date}</td>
        <td>${state}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs btn_edit">编辑</button>
          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${Id}">删除</button>
        </td>
      </tr>
        `).join(''))

    // 在这渲染页面
    renderPage(data.total)
}

render()

const form = layui.form
axios.get('/my/article/cates').then(res => {
    $('#cateSelect').append(res.data.data.map(item => `
    <option value="${item.Id}">${item.name}</option>
    `).join(''))
    form.render('select')
})

const laypage = layui.laypage

function renderPage(total) {
    laypage.render({
        // 存放分页的容器
        elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
        count: total,//数据总数，从服务端得到
        curr: query.pagenum,  //当前第几页
        limit: query.pagesize,  // 每页显示的条数
        limits: [1, 2, 3, 4, 6, 8, 10],  // 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], //自定义排版
        jump: function (obj, first) {
            // jump 的触发时机
            // 1.当分页渲染的时候会触发该回调函数
            // 2.当分页切换的时候会触发该回调函数
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            // 完成分页效果  发ajax请求
            query.pagenum = obj.curr
            query.pagesize = obj.limit
            // render()

            //首次不执行
            if (!first) {
                //do something
                render()
            }
        }
    });
}




// 筛选功能
/*
步骤:
1.注册submit事件
2.阻止默认行为
3.修改query数据  发ajax请求
*/
$('#form').on('submit', function (e) {
    e.preventDefault()
    // console.log($('#cateSelect').val())
    query.cate_id = $('#cateSelect').val()
    query.state = $('#stateSelect').val()

    // 只要筛选了 都要从第一页开始看
    query.pagenum = 1
    render()

})


const layer = layui.layer

// 删除功能
$("#list").on("click", '.btn_delete', async function () {
    // console.log(111111)
    const Id = $(this).data("id");
    const { data: { status, message } } = await axios.get(`/my/article/delete/${Id}`)
    // console.log(res)

    if (status !== 0) return layer.msg(message)


    // 解决删除的bug
    // 当一页只有一个删除按钮   删除的时候 这一页就没有了 应该展示一个页面的数据
    // 获取按钮的个数


    // if ($('.btn_delete').length === 1) {
    //     if (query.pagenum !== 1) {
    //         query.pagenum--
    //     }
    // }

    // if ($('.btn_delete').length === 1) {
    //     if (query.pagenum !== 1) {
    //         query.pagenum--
    //     }
    // }
    if ($('.btn_delete').length === 1) {
        query.pagenum = query.pagenum === 1 ? 1 : query.pagenum--
    }



    layer.msg(message)
    render()
})